<!-- 

3 - A Bouncing Ball (19/3/2020)

Use the `requestAnimationFrame` technique that we saw in Chapter 14 and Chapter 16 to draw a box with a bouncing ball in it. The ball moves at a constant speed and bounces off the box’s sides when it hits them.
-->

<!DOCTYPE html>
<canvas width="400" height="400"></canvas>
<script>
    let cx = document.querySelector("canvas").getContext("2d");

    let lastTime = null;
    function frame(time) {
        if (lastTime != null) {
            updateAnimation(Math.min(100, time - lastTime) / 1000);
        }
        lastTime = time;
        requestAnimationFrame(frame);
    }
    requestAnimationFrame(frame);

    function updateAnimation(step) {
        cx.clearRect(0, 0, 400, 400);
        cx.strokeStyle = "blue";
        cx.lineWidth = 4;
        cx.strokeRect(25, 25, 350, 350);

        x += step * speedX;
        y += step * speedY;

        if (x < 25 + radius || x > 375 - radius)
            speedX = -speedX;
        if (y < 25 + radius || y > 375 - radius)
            speedY = -speedY;

        cx.fillStyle = "red";
        cx.beginPath();
        cx.arc(x, y, radius, 0, 7);
        cx.fill();
    }
</script>